<template>
  <div class="search-container">
    <div style="width:100%;margin-top:40px;display:flex">
      <div class="gt-info">
        <p style="text-align:left;font-size:26px;font-weight:600;margin:0px 0px 10px 0px">搜索结果
          <span v-if="search.text.length > 0">`{{search.text}}`</span>
        </p>
        <section style="width:100%;margin:20px 0px;float:left">
          <el-radio-group v-model="sradio" style="float:left" size="small" @change="getData">
            <el-radio label="0" border style="margin-right:5px">默认本站</el-radio>
            <el-radio label="kuwo" border style="margin-right:5px">酷我音乐</el-radio>
            <el-radio label="wangyi" border style="margin-right:5px">网易云音乐</el-radio>
          </el-radio-group>
        </section>  
      </div>
    </div>
    <p class="gt-ctrl">全部歌曲
      <el-button style="margin-left:50px" type="danger" icon="el-icon-caret-right" @click="playAll">
        播放全部
      </el-button>
    </p>
    <item-table ref="isearch" class="gt-table"/>
  </div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
import { shareGather} from '@/api/event'
import { error } from '@/utils/toast'
import ItemTable from '@/components/ItemTable'
export default {
  name: "search",
  components: {
    ItemTable,
  },  
  data() {
    return {
      sradio:'0',
    }
  },
  computed:{
    ...mapState(['search']),
    ...mapGetters(['user_id', 'isGuest']),
  },
  created() {
  },
  mounted() {
    this.getData()
  },
  methods: {
    shareGather,
    playAll(e) {
      this.$refs.isearch.playAllItems(e)
    },
    getData() {
      if (this.sradio == 0) {
        this.$refs.isearch.searchData(this.search.text, "")
      } else {
        this.$refs.isearch.searchData(this.search.text, this.sradio)
      }

      // if (this.sradio == 0) {
      //   this.$refs.isearch.searchData(this.search.text, "")
      // } else if (!this.isGuest) {
      //   this.$refs.isearch.searchData(this.search.text, this.sradio)
      // } else {
      //   this.sradio = '0'
      //   error("无此权限, 请联系管理员");
      // }
    }
  },
  watch:{
    'search.text': function () {
      this.getData()
    }
  }
}
</script>

<style lang="scss" scoped>
 .search-container {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #2c3e50;
    // width: 100%;
    height: 100%;
    margin: 0 auto;
    width: 1300px;
  }

  .gt-info {
    width:calc(100% - 150px);
    img {
      width:40px;
      height:40px;
      background-repeat: no-repeat;
      background-size:100% 100%;
      border-radius: 50% 50%;
    }

    .u-text {
      float:left;
      font-size:13px;
      line-height: 40px;
      margin-right:10px;
    }
  }

  .gt-ctrl {
    text-align:left;
    font-size:22px;
    font-weight:500;
    height:36px;
    line-height:36px;
    display: flex;

  }

  .gt-table {
    width:100%;
    margin-bottom:40px;
    display:inline-block;
  }

</style>